<template>
    <div>
        <el-card class="role-access-card" v-for="(typeItem, typeIndex) in appSourceOptions.type" :key="typeIndex" v-if="appSourceGroupByType[typeIndex]">
            <div slot="header" class="clearfix">
                <el-checkbox
                    v-model="selectedAll[typeIndex]"
                    @change="handleCheckAllChange($event, typeIndex)"
                    :indeterminate="isIndeterminate[typeIndex]">
                    {{ typeItem.label }}
                </el-checkbox>
            </div>

            <template>
                <el-checkbox-group v-model="selected">
                    <el-checkbox
                        @change="handleCheckedChange($event, typeIndex)"
                        v-for="(item, index) in appSourceGroupByType[typeIndex]"
                        :label="item.id"
                        style="width: 120px;"
                        :key="index">
                        {{ item.id }} ) {{ item.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </template>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "AppSource",
    props: {
        value: [],
    },
    data () {
        return {
            isIndeterminate: {},
            selectedAll: {},
            appSourceOptions: this.$store.state.appSource.options,
            selected: [],
            locked: false,
        }
    },
    computed: {
        appSources () {
            return this.$store.state.appSource.all;
        },
        appSourceGroupByType() {
            // 将渠道按类型分组
            let groups = {};
            this.$store.state.appSource.all.map(v => {
                if (!groups[v.type]) {
                    groups[v.type] = [v];
                } else {
                    groups[v.type].push(v);
                }
            });
            return groups;
        },
    },
    watch: {
        value () {
            this.syncForm();
        }
    },
    methods: {
        // 顶级权限选中|取消, 自动选中|取消子级权限
        handleCheckAllChange(val, pKey) {
            this.isIndeterminate[pKey] = false;
            let typeItem = this.appSourceOptions.type[pKey];
            if (val) {
                this.appSources.map(v => {
                    if (typeItem.value === v.type && this.selected.indexOf(v.id) === -1) this.selected.push(v.id);
                });
            } else {
                this.appSources.map(v => {
                    if (typeItem.value === v.type && this.selected.indexOf(v.id) > -1)this.selected.splice(this.selected.indexOf(v.id), 1);
                });
            }

            if (!this.locked) this.$emit('input', this.selected);
        },
        // 子级选中|取消, 检查顶级权限是否需要选中|取消
        handleCheckedChange(val, pKey) {
            let typeItem = this.appSourceOptions.type[pKey];
            let childArr = this.appSources.filter(v => { return v.type === typeItem.value; }).map(v => v.id);
            let checkedLength = this.selected.filter(v => childArr.includes(v)).length;
            this.isIndeterminate[pKey] = checkedLength > 0 && checkedLength < childArr.length;
            this.selectedAll[pKey] = childArr.length && checkedLength === childArr.length;

            if (!this.locked) this.$emit('input', this.selected);
        },
        // 自动选择
        autoSelected() {
            // 设置locked 防止重复触发
            this.locked = true;
            Object.keys(this.appSourceOptions.type).map(type => {
                this.handleCheckedChange(true, type);
            })
            this.locked = false;
        },
        syncForm() {
            this.selected = this.value;
            this.autoSelected();
        }
    },
    created() {
        this.syncForm();
    }
}
</script>

<style scoped>

</style>
